// ========================================================
// tab UI生成器
// ========================================================
@mixin tabs-style($name, $bg-color, $border-color, $color, $color-active, $striped) {
    &.tabs-#{$name} {
        color: $color;
        background-color: $bg-color;
        background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);

        // 设置视网膜屏幕下得上下border颜色
        @include retina-border-color($border-color);

        .tab-item {
            color: $color;
            background-color: $bg-color;

            &.actived {
                color: $color-active;
            }
        }

        &.tabs-striped, &.tabs-striped-top {
            .tab-item.actived:before {
                background-color: $striped !important;
            }
        }
    }
}

@mixin tabs($styles: stable positive) {
    line-height: rem($tabs-height);

    z-index: $z-index-tabs;

    color: $tabs-default-text;
    display: flex;
    flex-direction: row;
    position: relative;

    width: 100%;
    height: rem($tabs-height);

    text-align: center;
    background-size: 0;
    background-color: $tabs-default-bg;

    border-width: 0;
    @include retina-border(top, $tabs-default-border);

    .tab-item {
        display: block;
        flex: 1;
        opacity: 1;
        position: relative;
        font-size: rem($tabs-text-font-size);
        text-decoration: none;
        @include text-ellipsis();

        -webkit-user-drag: none;
        user-select: none;

        &.active {
            opacity: $active-opacity;
        }

        &.actived {
            color: $tabs-default-active;

            &:before {
                background-color: $tabs-default-striped !important;
            }
        }

        &.disabled,
        &[disabled] {
            opacity: .4;
            cursor: default;
            pointer-events: none;
        }
    }

    .icon {
        display: block;
        font-size: rem($tabs-icon-size);
        height: rem($tabs-icon-size);
    }

    &.tabs-icon-top,
    &.tabs-icon {
        .tab-item {
            padding-top: rem($tabs-padding);
            font-size: rem($tabs-text-font-size-side-icon);
            line-height: rem($tabs-text-font-size);
        }
    }

    &.tabs-icon-only {
        .icon {
            height: 100%;
            line-height: inherit;
            font-size: rem($tabs-icon-size-only);
        }
    }

    &.tabs-header,
    &.tabs-footer {
        position: absolute;
        left: 0; right: 0;
    }

    &.border-bottom,
    &.tabs-header {
        @include retina-border-width(top, 0);
        @include retina-border-width(bottom);
    }

    &.tabs-header {
        top: 0;
    }

    &.tabs-footer {
        bottom: 0;
    }

    &.tabs-striped, &.tabs-striped-top {
        .tab-item.actived:before {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
            content: ' ';
            width: $tabs-striped-width;
            height: rem($tabs-striped-height);
            background-color: $tabs-default-text;
        }
    }

    &.tabs-striped {
        .tab-item.actived:before {
            bottom: 0;
        }
    }

    &.tabs-striped-top {
        .tab-item.actived:before {
            top: 0;
        }
    }

    @each $style in $styles {
        @if $style == stable {
            @include tabs-style($style, $tabs-stable-bg, $tabs-stable-border,
                $tabs-stable-text, $tabs-stable-active, $tabs-stable-striped);
        }
        @if $style == positive {
            @include tabs-style($style, $tabs-positive-bg, $tabs-positive-border,
                $tabs-positive-text, $tabs-positive-active, $tabs-positive-striped);
        }
    }
}
